<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- 过滤器(管道函数) 一般可被用于一些常见的文本格式化 -->
        <div>日期是:{{time | datatime('yyyy')}}</div>
        <div>日期是:{{time | datatime('yyyy-MM-DD')}}</div>
        <div>日期是:{{time | datatime('yyyy-MM-DD hh:mm:ss')}}</div>

    </div>
    <script src='../js/vue.js'></script>
    <script>
        // 将时间戳转换为年月日
        Vue.filter('datatime', function (val, param) {
            // console.log(val); 参数val是要过滤的数据 参数param是用户传递的参数
            const date = new Date(val)
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            const day = date.getDate()

            const h = date.getHours()
            const m = date.getMinutes()
            const s = date.getSeconds()

            if (param == 'yyyy') {
                return `${year}`
            } else if (param == 'yyyy-MM-DD') {
                return `${year}-${month}-${day}`
            } else if (param == 'yyyy-MM-DD hh:mm:ss') {
                return `${year}-${month}-${day} ${h}:${m}:${s}`
            }
        })

        const vm = new Vue({
            el: '#app',
            data: {
                // time: 1599271959785
                time: +new Date()
            },
            methods: {},
            // filters: {
            //     datatime(val) {
            //         const date = new Date(val)
            //         const year = date.getFullYear()
            //         const month = date.getMonth() + 1
            //         const day = date.getDate()

            //         return `${year}-${month}-${day}`
            //     }
            // }
        })
    </script>
</body>

</html>